<template>
	<view class="content" style="background-color: #f5f5f5;min-height: 100vh;" @click="showTopRight=false">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="关注门店"
			:autoBack="true">
			<view class="u-nav-slot" slot="right" style="display: flex;">
				<!-- <image src="../../../static/images/mess/search.png" style="width:32rpx;height:34rpx;" mode=""></image> -->
				<view class="" @click.stop="showTopRight=!showTopRight">
					<u-icon name="more-dot-fill" style='margin-left: 20rpx;'></u-icon>
				</view>
				<TopRight :showTopRight='showTopRight'/>
			</view>
		</u-navbar>
		<view class="container">
			<view class="top">
				<u-tabs lineWidth="30" lineColor="#DD2131" inactiveStyle=" font-size:32rpx;color:#999999"
					activeStyle="font-size:32rpx; color:#DD2131"
					itemStyle="width:40%; height: 34px;padding-top:32rpx;padding-bottom:8rpx;" :list="list1"
					@click="click"></u-tabs>
			</view>
			<view class="shop" v-if="type==1 && list.length>0">
				<view class="li" v-for="(item,indexx) in list" :key="indexx" @click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+item.id)">
					<view class="li_top">
						<u-image :src="item.store_image" :lazy-load="true" height="80rpx"
							width="80rpx" radius='8rpx'>
						</u-image>
						<view class="box_center">
							<view class="title co3 fw6">{{item.stroe_name}}</view>
							<view class="flex">
								<u-rate gutter="2" count="5" v-model="item.postage_score" :allowHalf='true' size='24rpx'
									:readonly='true' activeColor='#FFC047' inactiveColor='rgba(255, 168, 72, 0.2)'>
								</u-rate>
								<text class="score">{{item.postage_score}}分</text>
								<text class="deal co9">已成交{{item.sales }}</text>
							</view>
						</view>
						<view class="box_right">
							<button class="entry fontS24">进店</button>
						</view>
					</view>
					<view class="li_center">
						<u-scroll-list :indicator="indicator">
							<view v-for="(item, index) in item.product" :key="index" class="li_img" @click.stop="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
								<image :src="item.image" style="height: 100%; width: 100%;"></image>
								<view class="money">
									<text class="fontS20">￥</text>
									<text>{{' '+item.price}}</text>
								</view>
							</view>
						</u-scroll-list>
					</view>
					<view class="li_bottom co9 fontS24 flexJBC">
						<view class="">
							<text class="">主营:</text>
							<text class="fontS24 li_text" v-for="(text,index) in item.main_business"
								:key="index">{{text}}</text>
						</view>
						<view class="">
							{{item.address}}
						</view>
					</view>
				</view>
			</view>
			<!-- 工厂 -->
			<view class="padding32" v-if='type==3 && list.length>0'>
				<view class="whiteBox mb24" style="" v-for="(itemm,index) in list" @click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+itemm.id)">
					<view class="inner_li">
						<view class="li_factory flexJBC">
							<view class="left">
								<u-image :src="itemm.store_image" width="200rpx" height="200rpx" radius="8rpx" />
							</view>
							<view class="right">
								<view class="li_box">
									<text class="co3 fw7 fontS28">{{itemm.stroe_name}}</text>
									<text class="float co9 fontS24">{{itemm.address}}</text>
								</view>
								<view class="flexJBC">
									<view class="">
										<text class="co3 fontS24 li_text" v-for="(text,index) in itemm.main_business"
											:key="index">{{text}}</text>
									</view>
									<text class="float co9 fontS20">已成交{{itemm.turnovers}}</text>
								</view>
								<view class="li_box flex">
									<view class="fontS24 co3" v-for="(text,index) in itemm.tags" :key="index"
										:class="index%2==0?'yellow':'pink'">
										{{text}}
									</view>
								</view>
								<view class="fontS24 co6 elipes2">{{itemm.store_info?itemm.store_info:'暂无门店简介'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
		<u-empty v-if="list.length==0 && !pageLoading" style="marginTop:100rpx"></u-empty>
	</view>
</template>
<script>
	import TopRight from '@/componentes/topRight.vue'
	export default {
		components:{
			TopRight
		},
		data() {
			
			return {
				showTopRight:false,
				pageLoading:true,
				page: 1,
				show: false,
				title: '',
				type: 1, //1店铺3厂家
				list1: [{
					name: '旗舰店',
					id:1,
				}, {
					name: '批发商',
					id:3
				}],
				indicator: false,
				list: [],
				count: 5,
				value: 2
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods: {
			getList() {
				this.$my.post('/index/user/get_follow', {
					page: this.page,
					limit: 10,
					type: this.type
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200 && res.data.data.length > 0) {
						if(this.page==1){
							this.list=res.data.data
						}else{
							this.list = this.list.concat(res.data.data)
						}
					}
				})
			},
			click(item) {
				if(item.id!=this.type){
					this.type = item.id
					this.page = 1;
					this.pageLoading=true;
					this.list=[];
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inner_li {
		.li_factory {

			.left {
				border-radius: 8rpx;
				width: 200rpx;
				height: 200rpx;
			}

			.right {
				flex: 1;
				// flex-grow: 1;
				margin-left: 20rpx;
				height: 200rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.li_box {
					.float {
						float: right;
					}

					.yellow {
						background-color: #FFF2D0;
						padding: 0 8rpx;
						margin-right: 20rpx;
						border-radius: 4rpx;
					}

					.pink {
						margin-right: 20rpx;
						background-color: #FFDED3;
						padding: 0 8rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}

	.content {

		.li_text,
			{
			padding: 0 10rpx;
			box-sizing: border-box;
			border-right: 1rpx solid #999;
		}

		.li_text:last-child {
			border: none;
		}

		.container {

			// background-color: tomato;
			.top {
				background-color: white;
				padding: 0 10%;
			}

			.shop {
				.li {
					margin: 0 auto;
					width: 90%;
					// height: 370rpx;
					background-color: white;
					margin-top: 24rpx;
					border-radius: 16rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.li_top {
						height: 80rpx;
						display: flex;


						.box_center {
							height: 100%;
							flex-grow: 1;
							// background-color: pink;
							margin: 0 20rpx;

							.score {
								color: #FFA848;
								margin-left: 8rpx;
							}

							.deal {
								margin-left: 20rpx;
							}
						}

						.box_right {
							.entry {
								width: 96rpx;
								height: 48rpx;
								padding: 0;
								line-height: 48rpx;
								color: $red;
								border: 2rpx solid $red;
								border-radius: 24rpx;
							}
						}
					}

					.li_center {
						height: 190rpx;
						// background-color: red;
						padding-top: 20rpx;
						padding-bottom: 12rpx;

						.li_img {
							min-width: 190rpx;
							height: 190rpx;
							margin-right: 18rpx;
							border-radius: 8rpx;
							overflow: hidden;
							position: relative;

							.money {
								position: absolute;
								padding: 0 5rpx;
								height: 36rpx;
								background-color: rgba(0, 0, 0, 0.6);
								border-radius: 20rpx 0 0 0;
								right: 0;
								bottom: 0;
								color: white;
							}
						}
					}

					.li_bottom {

						// height: 40rpx;
						// background-color: tomato;
						.li_text {
							padding: 0 8rpx;
						}

						.border {
							display: inline-block;
							border-left: 2rpx solid #999999;
							border-right: 2rpx solid #999999;
						}
					}
				}
			}


		}
	}
</style>
